<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                 label-width="68px">

            <el-form-item label="到货单号" prop="nos">
                <el-input v-model="queryParams.nos" placeholder="请输入到货单号"
                        clearable @keyup.enter.native="handleQuery"/>
            </el-form-item>
            <!--<el-form-item label="到货日期">
                <el-date-picker clearable v-model="queryParams.arriveTime"
                                type="date" value-format="yyyy-MM-dd" placeholder="请选择到货日期">
                </el-date-picker>
            </el-form-item>-->
            <el-form-item label="到货日期">
              <el-date-picker v-model="dateRange"
                              style="display: flex;"
                              value-format="yyyy-MM-dd"
                              type="daterange"
                              range-separator="-"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
          <el-form-item label="申请人" prop="createBy">
            <el-input v-model="queryParams.createBy" placeholder="请输申请人"
                      clearable @keyup.enter.native="handleQuery"/>
          </el-form-item>
            <el-form-item label="供应商" prop="supplierName">
                <el-input v-model="queryParams.supplierName" placeholder="请输供应商"
                        clearable @keyup.enter.native="handleQuery"/>
            </el-form-item>

          <!--<el-form-item label="产品编码" prop="goodsCode">
            <el-input v-model="queryParams.goodsCode" placeholder="请输供应商"
                      clearable @keyup.enter.native="handleQuery"/>
          </el-form-item>-->

            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>



        <el-table border v-loading="loading" :data="dataList" @selection-change="handleSelectionChange" ref="table" :max-height="tableMaxHeight" @sort-change="handleSortChange">
            <el-table-column type="selection" width="55" align="center"/>
            <el-table-column sortable label="到货单号" align="center" prop="nos"/>
            <el-table-column sortable label="到货日期" align="center" prop="createTime" width="180">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.arrivalDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                </template>
            </el-table-column>
            <el-table-column sortable label="到货类型" align="center" prop="fahuoType">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.fahuo_type" :value="scope.row.fahuoType"/>
              </template>
            </el-table-column>
          <el-table-column label="申请人" align="center" prop="createBy"/>
            <el-table-column sortable label="供应商名称" align="center" prop="supplierName"/>
            <el-table-column sortable label="到货金额" align="center" prop="daohuoMoney"/>
            <el-table-column sortable label="到货重量" align="center" prop="dunwei"/>
            <el-table-column sortable label="运费" align="center" prop="yunfei"/>
            <el-table-column sortable label="是否打款运费" align="center" prop="isSong"/>
            <el-table-column sortable label="送货人" align="center" prop="songhuoren"/>
            <el-table-column sortable label="开户行" align="center" prop="songkaihuhang"/>
            <el-table-column sortable label="账号" align="center" prop="songzhanghao"/>

            <el-table-column label="备注" align="center" prop="remark"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" icon="el-icon-document"
                             @click="daohuoDetail(scope.row)" v-hasPermi="['develop:LvBuy:edit']">到货明细</el-button>
                  <el-button size="mini" type="text" icon="el-icon-document"  v-if="scope.row.yunfei>0"
                             @click="yunfei(scope.row)" >打款运费</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList"/>
        <lvBuy-addFormList ref="formCg" @ok="getList"></lvBuy-addFormList>
        <lv-daohuo-detail-list ref="daohuoDetailList" @ok="getList"></lv-daohuo-detail-list>
        <yunfei-form ref="yunfeiform" @ok="getList"></yunfei-form>
    </div>
</template>

<script>
    import { deleteAction, getAction } from '@/api/manage'
    import LvBuyAddFormList from '@/views/develop/lvBuy/module/LvBuyAddFormList'
    import YunfeiForm from "@/views/develop/lvBuy/module/YunfeiForm";
    import LvDaohuoDetailList from "@/views/develop/lvDaohuoDetail/module/LvDaohuoDetailList.vue";
    import { listYunfei } from "@/api/develop/lvDaohuo";

    export default {
      dicts: [ 'fahuo_type'],
        name: "YunfeiList",
        components: {
          LvDaohuoDetailList,
          LvBuyAddFormList,
          YunfeiForm,
        },
        data() {
            return {
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 采购单表格数据
                dataList: [],
                dateRange: [],
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    code: null,
                    name: null,
                    mainId: null,
                    nos: null,
                    ddDate: null,
                    subDate: null,
                    type: null,
                    ywType: null,
                    tax: null,
                    customerId: null,
                    customerName: null,
                    isBuy: null,
                    money: null,
                    dingjin: null,
                    shengyu: null,
                    shuie: null,
                    counts: null,
                    dunwei: null,
                    supplierId: null,
                    supplierName: null,
                    deptId: null,
                    deptName: null,
                    userId: null,
                    userName: null,
                    state: null,
                    arrivalDate: null,
                    orderByColumn: "a.arrival_date",
                    isAsc: "desc",
                },
                url: {
                    list:'/lvDaohuo/lvDaohuo/listYunfei',
                    removeCg:'/lvBuy/lvBuy/removeCg/',
                    export:'/lvBuy/lvBuy/export',
                },
                tableMaxHeight: window.innerHeight - 320,
            };
        },
        created() {
            this.getList();
            window.addEventListener('resize', this.getTableHeight);
        },
        destroyed () {
            window.removeEventListener('resize', this.getTableHeight)
        },
        methods: {
            daohuoDetail(row){
              this.$refs.daohuoDetailList.showDaohuoDetailListByDaohuoId(row.id);
            },
            /*zhijian(row){
              this.$refs.zhijianformList.zhijian(row);
            },*/
            yunfei(row){
              this.$refs.yunfeiform.showyunfei(row);
              },
            zhifahuo(row){
              this.$refs.zhifahuoform.showzhifahuo(row);
            },
            /** 查询采购单列表 */
            getList() {
                this.loading = true;
              listYunfei(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
                    this.dataList = response.rows;
                    this.total = response.total;
                    this.loading = false;
                });
            },
            getTableHeight () {
                this.tableHeight = window.innerHeight - 320
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
             /** 排序触发事件 */
            handleSortChange(column, prop, order) {
              this.queryParams.orderByColumn = column.prop;
              this.queryParams.isAsc = column.order;
              this.handleQuery();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.dateRange = [];
                this.resetForm("queryForm");
                this.handleQuery();
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.id)
                this.single = selection.length !== 1
                this.multiple = !selection.length
            },
            /** 新增按钮操作 */
           /* handleAdd() {
                this.$refs.form.handleAdd();
            },*/
            handleAddCg() {
              this.$refs.formCg.handleAddCg();
            },
            /** 修改按钮操作 */
            handleUpdate(row) {
                this.$refs.form.handleUpdate(row);
            },
            handleDeleteCgd(row) {
              const ids = row.id || this.ids;
              deleteAction(this.url.removeCg, ids).then(response => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
              }).catch(() => {});
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const ids = row.id || this.ids;
                deleteAction(this.url.remove, ids).then(response => {
                    this.getList();
                    this.$modal.msgSuccess("删除成功");
                }).catch(() => {});
            },
            /** 导出按钮操作 */
            handleExport() {
                this.download(this.url.export, {
                    ...this.queryParams
                }, `lvBuy_${new Date().getTime()}.xlsx`)
            },
  }
};
</script>
